<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import LinCardTime from '../components/cards/LinCardTime.vue';
import LinCard01 from '../components/cards/LinCard01.vue';
import LContentEditor from '../components/editor/LContentEditor.vue';
import { getArticleById } from '../request/api/article';
import { useRoute } from 'vue-router';
import { useArticleStore } from '../store';
import { storeToRefs } from 'pinia';
import LinTake from '../components/article/LinTake.vue';
const store = useArticleStore()
const { articleList } = storeToRefs(store)
const img = ref('/images/bkg1.jpg')
let state = ref({})
let flag = ref(false)
// const contents = ref([])

const route = useRoute()
watch(() => {

})
const getList = async () => {
    await getArticleById(route.params.id).then(res => {
        state = res.data.data
        img.value = res.data.data.articleImg
        flag.value = true
        // console.log(state)
    })
}
// 获取单个文章
onMounted(() => {
    getList()
    // 开始监听路由变化
    watch(() => route.path, (newPath, oldPath) => {
        getList()
        // console.log(`路由从 ${oldPath} 变为 ${newPath}`);
    },{
        deep:true
    });

})



</script>

<template>
    <!-- 博文正文展示页面  在article仅做展示测试-->
    <div class="l-article" :style="{ 'background-image': `url(${img})` }">
        <div class="content">
            <!-- 左侧卡片区 -->
            <div class="content-left">
                <LinCard01 title="推荐文章" :contents="articleList.slice(2, 7)"></LinCard01>
            </div>
            <!-- 正文展示区域 -->
            <div class="content-main">
                <div class="title-box">
                    <h1>{{ state.title }}</h1>
                    <div class="time">
                        <span>前端</span>
                        <span>发布时间：{{ state.updateAt }}</span>
                        <span>浏览量：9527</span>
                        <span>评论数：97</span>
                    </div>
                    <p>版权声明：本文为博主原创文章，转载请说明来源</p>
                </div>
                <!-- 富文本展示 -->
                <LContentEditor :html="state.content" v-if="flag" />
                <!-- 底部 评论区-->
                <div class="botton-box">
                    <LinTake></LinTake>
                </div>
            </div>
            <!-- 右侧卡片区 -->
            <div class="content-right">
                <LinCardTime></LinCardTime>
            </div>
        </div>


    </div>
</template>

<style lang="scss" scoped>
// 背景图动画
@keyframes bkg {
    0% {
        transform: scale(.5);
    }

    50% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1);
    }
}

.l-article {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 20px;
    padding-top: 60px;
    animation: bkg .3s linear;

    .content {
        display: flex;
        justify-content: center;
        align-items: top;
        // border: 1px solid #ccc;
        height: 100%;
        padding: 10px;

        // 左侧卡片区
        .content-left {
            min-width: 200px;
        }

        // 控制文章展示区
        .content-main {
            min-width: 200px;
            margin: 0 60px;
            width: 800px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px 1px #333;
            overflow: hidden;

            .title-box {
                padding: 20px;
                // border-bottom: 1px solid #ccc;

                h1 {
                    font-size: 32px;
                    font-weight: 700;
                    text-align: left;
                    color: #332b2b;
                }

                span {
                    margin-right: 20px;
                }

                .time {
                    display: flex;
                    justify-content: left;
                    padding: 10px;
                    font-size: 14px;
                    color: #666;
                }

                p {
                    padding: 10px;
                    font-size: 14px;
                    color: #b30000;
                }
            }
        }

        // 右侧卡片区
        .content-right {
            min-width: 200px;

        }
    }
}
</style>